import 'package:auto_route/auto_route.dart';
import 'package:carousel_slider/carousel_slider.dart';
import 'package:flutter/material.dart';
import 'package:flutter_easyloading/flutter_easyloading.dart';
import 'package:provider/provider.dart';

import '../../../data/models/bt_broadcaster.dart';
import '../../utils/bt_app_bar_utils.dart';
import '../models/bt_post_details_model.dart';
import '../widgets/bt_comment_item_widget.dart';

@RoutePage(name: "postDetailsRoute")
class BtPostDetailsScreen extends StatefulWidget {
  const BtPostDetailsScreen({
    super.key,
    required this.title,
    required this.authorId,
    required this.authorName,
    required this.avatar,
    required this.broadcasters,
  });

  final String title;

  final String authorId;

  final String authorName;

  final String avatar;

  final List<BtBroadcaster> broadcasters;

  @override
  State<StatefulWidget> createState() => _BtPostDetailsScreenState();
}

class _BtPostDetailsScreenState extends State<BtPostDetailsScreen> {
  int _current = 0;
  final CarouselController _controller = CarouselController();
  final TextEditingController _textEditingController = TextEditingController();

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return ChangeNotifierProvider(
      create: (context) => BtPostDetailsModel(
          widget.title, widget.authorId, widget.authorName, widget.avatar, widget.broadcasters)
        ..loadPost(),
      child: Consumer<BtPostDetailsModel>(builder: (context, model, _) {
        if (model.isLoading) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: appBar(context, model.title, null),
              body: const Center(
                child: CircularProgressIndicator(),
              ));
        } else if (model.error.isNotEmpty) {
          return Scaffold(
              backgroundColor: Colors.white,
              appBar: appBar(context, model.title, null),
              body: Center(
                child: Text('An Error Occurred: ${model.error}'),
              ));
        } else {
          ///
          final List<Widget> imageSliders = model.picUrls
              .map((item) => ClipRRect(
                    borderRadius: const BorderRadius.all(Radius.circular(12.0)),
                    child: Image.asset(
                      model.picUrls[model.picUrls.indexOf(item)],
                      fit: BoxFit.cover,
                      width: double.infinity,
                    ),
                  ))
              .toList();

          ///
          return Scaffold(
            backgroundColor: Colors.white,
            appBar: appBar(context, model.title, null),
            body: Stack(children: [
              Container(
                padding: const EdgeInsets.only(left: 18, top: 8, right: 18, bottom: 90),
                child: SingleChildScrollView(
                  child: Column(
                    children: [
                      CarouselSlider(
                          items: imageSliders,
                          carouselController: _controller,
                          options: CarouselOptions(
                            autoPlay: true,
                            aspectRatio: 3.8,
                            enlargeCenterPage: true,
                            onPageChanged: (index, reason) {
                              setState(() {
                                _current = index;
                              });
                            },
                          )),
                      Row(
                        mainAxisAlignment: MainAxisAlignment.center,
                        children: model.picUrls.asMap().entries.map((entry) {
                          return GestureDetector(
                            onTap: () => _controller.animateToPage(entry.key),
                            child: Container(
                              width: 4.0,
                              height: 4.0,
                              margin: const EdgeInsets.symmetric(vertical: 8.0, horizontal: 4.0),
                              decoration: BoxDecoration(
                                  shape: BoxShape.circle,
                                  color: (Theme.of(context).brightness == Brightness.dark
                                          ? const Color(0xFFFFFFFF)
                                          : const Color(0xFF4DB4FF))
                                      .withOpacity(_current == entry.key ? 1.0 : 0.2)),
                            ),
                          );
                        }).toList(),
                      ),
                      Container(
                        padding: const EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 16),
                        decoration: BoxDecoration(
                          color: const Color(0xFFF3FBFF),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(width: 1, color: const Color(0x1a14a7d5)),
                        ),
                        child: Column(
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Text(model.subTitle,
                                textAlign: TextAlign.start,
                                style: const TextStyle(fontSize: 16, color: Color(0xFF1D85FF))),
                            const SizedBox(height: 20),
                            Text(model.content,
                                textAlign: TextAlign.center,
                                style: const TextStyle(fontSize: 12, color: Color(0xFF63A8F9)))
                          ],
                        ),
                      ),
                      Container(
                        margin: const EdgeInsets.only(top: 24, bottom: 5),
                        decoration: BoxDecoration(
                          color: const Color(0xFFFFFFFF),
                          borderRadius: BorderRadius.circular(8),
                          border: Border.all(width: 1, color: const Color(0x11479cff)),
                          boxShadow: const [
                            BoxShadow(
                              color: Color(0x33479cff), // 阴影颜色
                              spreadRadius: 0, // 阴影扩散程度
                              blurRadius: 10, // 阴影模糊程度
                              offset: Offset(0, 2), // 阴影偏移量
                            ),
                          ],
                        ),
                        child: ListView(
                          shrinkWrap: true,
                          physics: const NeverScrollableScrollPhysics(),
                          children: [
                            for (var item in model.staticComments)
                              BtCommentItemWidget(item: item, model: model),
                          ],
                        ),
                      ),
                    ],
                  ),
                ),
              ),
              Positioned(
                bottom: 0,
                left: 0,
                right: 0,
                child: Container(
                    height: 90,
                    decoration: const BoxDecoration(
                      color: Colors.white,
                      border: Border(
                        top: BorderSide(
                          color: Colors.black12,
                          width: 0.5,
                        ),
                      ),
                    ),
                    padding: const EdgeInsets.only(left: 20, right: 20, top: 16),
                    child: Row(
                      mainAxisAlignment: MainAxisAlignment.spaceBetween,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Container(
                            width: 249,
                            height: 36,
                            decoration: BoxDecoration(
                              color: const Color(0xFFF2F2F2),
                              borderRadius: BorderRadius.circular(8),
                            ),
                            child: TextField(
                              maxLines: null,
                              keyboardType: TextInputType.text,
                              textInputAction: TextInputAction.next,
                              autofocus: false,
                              textAlign: TextAlign.start,
                              style: const TextStyle(fontSize: 13),
                              decoration: const InputDecoration(
                                border: InputBorder.none,
                                contentPadding: EdgeInsets.only(left: 12, right: 12, bottom: 12),
                                hintText: "Enter your ideas...",
                                hintStyle: TextStyle(
                                  fontSize: 10,
                                  color: Color(0x4d000000),
                                ),
                              ),
                              onChanged: (value) => {model.setCommentContent(value)},
                              controller: _textEditingController,
                              //controller: TextEditingController(text: model.commentContent),
                            )),
                        InkWell(
                          child: Container(
                            width: 63,
                            height: 32,
                            margin: const EdgeInsets.only(top: 2),
                            padding: const EdgeInsets.only(top: 3),
                            decoration: BoxDecoration(
                              color: const Color(0xFF4DB4FF),
                              borderRadius: BorderRadius.circular(23),
                            ),
                            child: const Text(
                              'Send',
                              textAlign: TextAlign.center,
                              style: TextStyle(
                                fontSize: 16,
                                color: Colors.white,
                              ),
                            ),
                          ),
                          onTap: () {
                            EasyLoading.show(status: 'Loading...');
                            model.sendComment((success) {
                              if (success) {
                                _textEditingController.clear();
                                FocusScope.of(context).unfocus();
                                EasyLoading.showToast('Send successfully');
                              }
                            });
                          },
                        )
                      ],
                    )),
              ),
            ]),
          );
        }
      }),
    );
  }
}
